import React, { useEffect, useState } from "react";
import { Space, Table, Tag } from "antd";
import type { TableProps } from "antd";
import instance from "../../api/request";
import type { FormProps } from "antd";
import { Button, Checkbox, Form, Input } from "antd";
import { Select } from "antd";
import { SearchOutlined, UndoOutlined } from "@ant-design/icons";
import { DatePicker } from "antd";
import Search from "../../compontent/Search";
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}
type FieldType = {
  tag?: string;
  keyword?: string;
  content?: string;
};
function Index() {
  const [data, setData] = useState([]);
  const [total, setTotal] = useState();
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const { RangePicker } = DatePicker;
  const [title,setTitle]=useState()
  const [rest]=Form.useForm()
  const getData = () => {
    const params = { page, pageSize };
    if(title) params.keyword=title
    instance.get("/article/list", { params }).then((res) => {
      if (res.data.rows) {
        setData(res.data.rows);
        setTotal(res.data.count);
      }
    });
  };
  useEffect(() => {
    getData();
  }, [pageSize, page,title]);
  const pageChange = (fenyePage, fenyepageSize) => {
    setPage(fenyePage);
    setPageSize(fenyepageSize);
  };
  const chong=()=>{
    rest.resetFields()
    setTitle('')
    getData()
  }
  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
    setTitle(values.title)
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };

  const [columns] = useState<TableProps<DataType>["columns"]>([
    {
      title: "集合编号",
      dataIndex: "id",
      key: "id",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "集合名称",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "内容体载",
      dataIndex: "content",
      key: "content",
    },
    {
      title: "筛选方式",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "内容量",
      dataIndex: "viewCount",
      key: "viewCount",
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
      key: "createdAt",
    },

    {
      title: "内容量",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.name.length > 5 ? "geekblue" : "green";

            return (
              <Tag color={color} key={tag.name}>
                {tag.name.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a>查看</a>
        </Space>
      ),
    },
  ]);
  return (
    <div>
      {/* <Form
        name="basic"
        labelCol={{ span: 8 }}
        form={rest}
        layout="inline"
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 800 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item<FieldType> label="集合编号" name="id">
          <Input />
        </Form.Item>
        <Form.Item<FieldType> label="集合名称" name="title">
          <Input />
        </Form.Item>
        <Form.Item<FieldType> label="内容体载" name="content">
          <Select
            defaultValue="全部"
            style={{ width: 120 }}
            onChange={handleChange}
            options={[
              { value: "jack", label: "Jack" },
              { value: "lucy", label: "Lucy" },
            ]}
          />
        </Form.Item>
        <Form.Item<FieldType> label="内容体载" name="content">
          <Select
            defaultValue="全部"
            style={{ width: 120 }}
            onChange={handleChange}
            options={[
              { value: "jack", label: "Jack" },
              { value: "lucy", label: "Lucy" },
            ]}
          />
        </Form.Item>
        <Form.Item<FieldType> label="日期">
          <RangePicker picker="week" />
        </Form.Item>
        <Form.Item<FieldType> label="状态" name="content">
          <Select
            defaultValue="全部"
            style={{ width: 120 }}
            onChange={handleChange}
            options={[
              { value: "jack", label: "Jack" },
              { value: "lucy", label: "Lucy" },
            ]}
          />
        </Form.Item>
        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            <SearchOutlined /> 搜索
          </Button>
        </Form.Item>{" "}
        <br />
        <br />
        <Button onClick={chong}>
          <UndoOutlined /> 重置
        </Button>
      </Form> */}
      <Search rest={rest} onFinish={onFinish} onFinishFailed={onFinishFailed} handleChange={handleChange}chong={chong}></Search>
      <Table<DataType>
        columns={columns}
        dataSource={data}
        pagination={{
          total: total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `Total ${total} items`,
          onChange: pageChange,
        }}
      />
    </div>
  );
}

export default Index;
